<template>
  <div class="recordItem">
      <div class="chatTime" v-show="item.showTime"><span>{{sendTime}}</span></div>
      <!-- 他人的消息 -->
      <div class="chatMessage" v-show="!isMy">
          <div class="chatSculpture"><img src="@/assets/img/message/联系客服.png" alt=""></div>
          <div class="chatContent"><p>{{message}}</p></div>
      </div>
      <!-- 我的消息 -->
      <div class="myChatMessage" v-show="isMy">
          <div class="chatContent"><img v-show="!isOnline" src="@/assets/img/message/网络异常.png" alt=""><p>{{message}}</p></div>
          <div class="chatSculpture"><img src="@/assets/img/message/联系客服.png" alt=""></div>
      </div>
  </div>
</template>

<script>
    export default {
        name: 'RecordItem',
        data() {
            return {
                sendTime: '',
                message:'',
                isOnline: navigator.onLine, // 初始网络连接状态
            }
        },
        props: {
            item:{
                type: Object,
                default: {},
            },
            myId:{
                type: Number,
                default: 0,
            },
        },
        computed:{
            isMy(){
                return this.item.userId == this.myId
            }
        },
        created(){
          window.addEventListener('online', this.updateNetworkStatus);
          window.addEventListener('offline', this.updateNetworkStatus);
        },
        mounted() {
            this.sendTime = this.item.SendTime.slice(11,16)
            this.message = this.item.ContentText
            console.log(this.message);
        },
        methods: {
          updateNetworkStatus() {
            this.isOnline = navigator.onLine;
            console.log(this.isOnline);
          },
        },
    }
</script>

<style scoped>
    /* 设置聊天时间样式 */
    .chatTime {
        text-align: center;
    }
/* 设置他人消息样式 */
    /* 设置聊天信息（头像＋文字）样式 */
    .chatMessage {
        display: flex;
    }
    /* 设置头像样式 */
    .chatMessage .chatSculpture {
        flex: 1;
        padding: 5px;
    }
    .chatMessage .chatSculpture img {
        height: 30px;
        width: 30px;
    }



    /* 设置聊天文字样式 */
    .chatMessage .chatContent {
        display: flex;
        flex: 9;
        padding: 10px;
    }
    .chatMessage .chatContent p {
        width: fit-content;
        position: relative;
        padding: 10px;
        padding-right: 13px;
        background-color: #fff;
        border-radius: 5px;

        /* white-space: normal; */
        word-wrap: break-word;

    }
    .chatContent img {
      width: 20px;
      height: 20px;
      margin-right: 5px;
      margin-top: 10px;
    }
    /* 设置箭头样式 */
    .chatMessage .chatContent p::before {
        content: '';
        position: absolute;
        left: -7px;
        top: 20px;
        transform: translate(0,-50%);
        display: block;
        border: 7px #fff solid;
        border-left: none;
        border-color: transparent #fff transparent transparent;
    }

/* 设置我的消息样式 */
    /* 设置聊天信息（头像＋文字）样式 */
    .myChatMessage {
        display: flex;
    }
    /* 设置头像样式 */
    .myChatMessage .chatSculpture {
        flex: 1;
        padding: 5px;
    }
    .myChatMessage .chatSculpture img {
        height: 30px;
        width: 30px;
    }

    /* 设置聊天文字样式 */
    .myChatMessage .chatContent {
        flex: 9;
        padding: 10px;
        text-align: right;
    }
    .myChatMessage .chatContent p {
        width: fit-content;
        position: relative;
        padding: 10px;
        padding-right: 13px;
        background-color: var(--color-high-text);
        border-radius: 5px;
        float: right;

        /* white-space: normal; */
        word-wrap: break-word;

    }
    /* 设置箭头样式 */
   .myChatMessage .chatContent p::after {
        content: '';
        position: absolute;
        right: -7px;
        top: 20px;
        transform: translate(0,-50%);
        display: block;
        border: 7px #fff solid;
        border-right: none;
        border-color: transparent  transparent transparent var(--color-high-text);
    }
</style>